/* eslint-disable react-hooks/rules-of-hooks */
import { Button, NavBar, TextArea, Toast } from 'antd-mobile'
import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './css/chat.module.css'
import Left from './compunets/Left'
import Rigth from './compunets/Rigth'
import { useSocket } from '../../../hook'
function index() {
  let nav=useNavigate()
  const [list,setlist]=useState([])
  const [userMsg,setUserMsg]=useState('')
  const socket=useSocket('wss://api-ticket.liulongbin.top',(msg)=>{
    console.log(msg);
    
    setlist(prev=>[...prev,{type:"AI",message:msg}])
  })
const send=()=>{
    if(userMsg.trim().length===0) return Toast.show('聊天消息不能为空')
      socket.current.emit('chatWithServer',userMsg)
      setlist(prev=>[...prev,{type:"User",message:userMsg}])
      setUserMsg('')
}
  return (
    <div className={styles.box}>
      <NavBar onBack={()=>nav(-1)} >客服聊天</NavBar>
      <div>
        {
          list.map((item,index)=>{
            return item.type==='AI'?<Left key={index} msg={item.message}/>:<Rigth key={index} msg={item.message}/>
          })
        }
        
        
      </div>
      <div className={styles.foot}>
      <TextArea 
          placeholder='请输入内容'
          value={userMsg}
          onChange={(val)=>setUserMsg(val)}
          onEnterPress={send}
        />
        <Button color='primary' fill='solid'
        onClick={send}
        disabled={userMsg.trim().length==0}
        className={styles.btns}>
            发送
          </Button>
          </div>
    </div>
  )
}

export default index
